<template>
  <div class="page-wrapper">

    <a-card
      title="网络硬盘"
      class="general-card list-table"
      :body-style="{height: 'calc(100% - 60px)'}"
    >
      <template #title>
        <a-tabs>
          <template #extra>
            <Upload/>
          </template>
          <a-tab-pane key="0">
            <template #title>
              <icon-folder/>
              全部
            </template>
          </a-tab-pane>
          <a-tab-pane key="10">
            <template #title>
              <icon-image/>
              图片
            </template>
          </a-tab-pane>
          <a-tab-pane key="20">
            <template #title>
              <icon-file-video/>
              视频
            </template>
          </a-tab-pane>

          <a-tab-pane key="30">
            <template #title>
              <icon-file-audio/>
              音频
            </template>
          </a-tab-pane>
          <a-tab-pane key="40">
            <template #title>
              <icon-file/>
              文件
            </template>
          </a-tab-pane>
        </a-tabs>
      </template>

      <div class="card-body">
        <div class="folder-list">
          文件列表
        </div>
        <!-- 文件列表 -->
        <div class="table-wrapper">
          <div class="table-header">
            <a-space :size="16">
              <a-checkbox :model-value="checkedAll" :indeterminate="indeterminate" @change="handleChangeAll">全选
              </a-checkbox>

              <!-- 选中后操作 -->
              <a-radio-group type="button" status="primary">
                <a-radio value="list">删除</a-radio>

                <a-radio value="icons">移动</a-radio>
              </a-radio-group>
            </a-space>
            <a-space :size="16">


              <a-input-search
                v-model="fileName"
                placeholder="搜索文件名"
                allow-clear
                button-text="搜索"
                search-button
                :button-props="{type: 'text'}"
              >
                <template #prefix>
                  <icon-search/>
                </template>
              </a-input-search>

              <a-radio-group type="button">
                <a-tooltip content="列表视图">
                  <a-radio value="list">
                    <icon-list/>
                  </a-radio>
                </a-tooltip>
                <a-tooltip content="列表视图">
                  <a-radio value="icons">
                    <icon-apps/>
                  </a-radio>
                </a-tooltip>
              </a-radio-group>

              <a-tooltip content="刷新">
                <a-button @click="fetchFolderDetail">
                  <icon-sync/>
                </a-button>
              </a-tooltip>
            </a-space>
          </div>
          <div class="table-box">
            <a-table
              bordered
              row-key="id"
              :data="tableData"
              :scroll="{ y: '100%'}"
              :loading="loading"
              :pagination="false"
            >
              <template #columns>
                <a-table-column title="文件名">
                  <template #cell="{ record }">
                    <a-space :size="12">
                      <FileIcon :data-source="record"/>

                      <span>{{ record.name }}</span>
                    </a-space>
                  </template>
                </a-table-column>

                <a-table-column title="修改时间" data-index="update_time"/>

                <a-table-column title="大小">
                  <template #cell="{ record }">
                    <span>{{ record.size || "-" }}</span>
                  </template>
                </a-table-column>
              </template>
            </a-table>
          </div>
          <div class="table-footer">

            <a-space :size="16">
              <a-checkbox :model-value="checkedAll" :indeterminate="indeterminate" @change="handleChangeAll">全选
              </a-checkbox>

              <!-- 选中后操作 -->
              <a-radio-group type="button" status="primary">
                <a-radio value="list">删除</a-radio>

                <a-radio value="icons">移动</a-radio>
              </a-radio-group>
            </a-space>

            <a-pagination :total="50" show-total show-jumper show-page-size/>

          </div>
        </div>
      </div>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import {computed, ref} from "vue";
import useLoading from "@/hooks/loading";
import {getFileList, getFolderList} from "@/api/content/drive";
import get from "lodash/get";
import FileIcon from "@/views/drive/components/file-icon.vue";
import Upload from "@/components/upload/index.vue";

// 10 图片 20 视频 30 音频 40 文档 50 压缩包 0 其他
const folderId = ref(); // 文件目录
const fileName = ref(); // 文件名称
const fileType = ref(); // 文件类型

const {loading, setLoading} = useLoading(true);


// 文件列表
const folderList = ref([]); // 文件夹列表
const fileList = ref([]);

const tableData = computed(() => {
  return folderList.value.concat(fileList.value);
});

// 全选操作
const indeterminate = ref(false)
const checkedAll = ref(false)
const handleChangeAll = (value) => {
  indeterminate.value = false;
  if (value) {
    checkedAll.value = true;
    fileList.value = ['1', '2', '3']
  } else {
    checkedAll.value = false;
    fileList.value = []
  }
}

// 获取目录
const fetchFolderList = async () => {
  try {
    const {data} = await getFolderList({name: fileName.value, folder_id: folderId.value});

    folderList.value = data || [];

  } catch (err) {
    // you can report use errorHandler or other
  } finally {
    setLoading(false);
  }
};

// 获取文件
const fetchFileData = async () => {
  try {
    const {data} = await getFileList({
      type: fileType.value,
      name: fileName.value,
      folder_id: folderId.value
    });

    fileList.value = get(data, "list", []) || [];

  } catch (err) {
    // you can report use errorHandler or other
  } finally {
    setLoading(false);
  }
};

async function fetchFolderDetail() {
  setLoading(true);
  try {
    await fetchFolderList();
    await fetchFileData();
  } catch (err) {
    // you can report use errorHandler or other
  } finally {
    setLoading(false);
  }
}

fetchFolderDetail();
</script>

<style scoped lang="less">
::v-deep(.arco-tabs-content) {
  padding: 0;
}

::v-deep(.arco-card-header) {
  padding-bottom: 0;
}

.page-wrapper {
  position: relative;
  height: 100%;
  padding: 16px 16px 0;


  .list-table {
    height: 100%;
    border-right: 1px solid #f2f3f5;

    .table-title {
      display: flex;
      font-size: 16px;
      line-height: 32px;

      .desc {
        margin-left: 12px;
        color: #6b778c;
      }
    }

    .card-body {
      display: flex;
      flex-shrink: 0;
      height: 100%;
      min-height: 0;
      overflow: hidden;

      .folder-list {
        width: 220px;
        padding-right: 20px;
        border-right: 1px solid #f2f3f5;
      }

      .table-wrapper {
        position: relative;
        display: flex;
        flex: 1;
        flex-direction: column;
        min-height: 0;
        padding: 20px 20px 0;
        overflow: hidden;

        .table-header {
          display: flex;
          justify-content: space-between;
          margin-bottom: 20px;
        }

        .table-footer {
          display: flex;
          justify-content: space-between;
        }

        .table-box {
          flex: 1;
        }
      }
    }
  }
}

</style>
